<template>
  <div>
    <el-row class="tac">
      <el-col :span="3">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          router>
          <el-submenu index="/echarts">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>echarts</span>
            </template>
            <el-menu-item-group>
              <!--<template slot="title">3dPie</template>-->
              <el-menu-item index="/echarts/3dPie">3dPie</el-menu-item>
              <el-menu-item index="/echarts/echart2">中间带图片的环饼图</el-menu-item>
              <el-menu-item index="/echarts/customX">自定义x轴label</el-menu-item>
              <el-menu-item index="/echarts/bars">柱图</el-menu-item>
              <el-menu-item index="/echarts/pieAndBar">饼图柱图联动</el-menu-item>
              <el-menu-item index="/echarts/barAndImg">柱图使用图片</el-menu-item>
              <el-menu-item index="/echarts/sangjitu">桑基图</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/highCharts">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>highCharts</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/highCharts/highCharts">highCharts</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="/exportExcel">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">导出excel表格</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/exportExcel/exportExcel1">导出方法一</el-menu-item>
              <el-menu-item index="/exportExcel/exportExcel2">导出方法二</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/luckysheet">
            <i class="el-icon-document"></i>
            <span slot="title">在线excel表格插件luckySheet</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>

          <el-submenu index="/api">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>API接口测试</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/api/userlogin">测试接口跨域</el-menu-item>
              <el-menu-item index="/api/qqcos">腾讯cos存储测试</el-menu-item>
              <el-menu-item index="/api/qqlogin">微信扫码登录</el-menu-item>
              <el-menu-item index="/api/aiartText">AI绘图-文生图</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="/excel">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>excel</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/excel/exportExcel">导出excel</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="/meditor">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>meditor</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/meditor/meditorTest">meditor测试页</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/jtopo">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>axios</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/axios/axiosPage">axios请求情况汇总</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

          <el-submenu index="/test">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>test</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/test/loginCode">登录手机验证码</el-menu-item>
              <el-menu-item index="/test/tableToMark">table转markdown表格</el-menu-item>
            </el-menu-item-group>
          </el-submenu>

        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "Menu",
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped lang="less">
.el-col-3{
  width: 100%;
  ul.el-menu{
    border-right: 0;
  }
}
</style>
